<template>
  <el-card shadow="hover" style="border-radius: 16px;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;">
      <div style="font-size: 20px; font-weight: 600;">物料列表</div>
      <div style="display: flex; gap: 12px;">
        <el-button type="primary" icon="Plus" @click="openForm()" round>新增物料</el-button>
        <el-upload :show-file-list="false" :before-upload="importExcel" accept=".xlsx,.xls">
          <el-button icon="Upload" round>导入</el-button>
        </el-upload>
        <el-button icon="Download" @click="exportExcel" round>导出</el-button>
      </div>
    </div>
    <el-table :data="materials" border stripe style="border-radius: 12px; overflow: hidden;">
      <el-table-column prop="code" label="物料编码" width="120" />
      <el-table-column prop="name" label="物料名称" width="140" />
      <el-table-column prop="type" label="类型" width="100" />
      <el-table-column prop="unit" label="单位" width="80" />
      <el-table-column prop="spec" label="规格型号" width="120" />
      <el-table-column prop="manufacturer" label="生产厂家" width="140" />
      <el-table-column prop="stock" label="库存" width="80" />
      <el-table-column prop="price" label="单价" width="100" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作" width="160">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="openForm(row)" round>编辑</el-button>
          <el-button size="small" type="danger" @click="remove(row.id)" round>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <MaterialForm v-model="formVisible" :material="currentMaterial" @refresh="fetchData" />
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '../api/material';
import { ElMessage, ElMessageBox } from 'element-plus';
import MaterialForm from '../components/MaterialForm.vue';

const materials = ref([]);
const formVisible = ref(false);
const currentMaterial = ref(null);

/**
 * 获取物料列表数据
 * 从API获取所有物料数据并更新到表格
 */
function fetchData() {
  api.getAll().then(res => {
    materials.value = res.data;
  });
}

/**
 * 打开物料表单对话框
 * @param {Object} row - 当前行物料数据，为空表示新增
 */
function openForm(row) {
  currentMaterial.value = row ? { ...row } : null;
  formVisible.value = true;
}

/**
 * 删除物料
 * @param {Number} id - 要删除的物料ID
 * 会先显示确认对话框，确认后调用API删除
 */
function remove(id) {
  ElMessageBox.confirm('确定要删除该物料吗？', '提示', { type: 'warning' })
    .then(() => {
      api.remove(id).then(() => {
        ElMessage.success('删除成功');
        fetchData();
      });
    });
}

/**
 * 导入Excel文件
 * @param {File} file - 上传的Excel文件对象
 * @returns {Boolean} 返回false阻止默认上传行为
 */
function importExcel(file) {
  api.importExcel(file).then(() => {
    ElMessage.success('导入成功');
    fetchData();
  });
  return false;
}

/**
 * 导出物料数据到Excel
 * 将当前表格数据导出为Excel文件
 */
function exportExcel() {
  api.exportExcel().then(res => {
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', '物料列表.xlsx');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
}

onMounted(fetchData);
</script> 